<template>
    <div class="backgImage">
        <div class="div3">
            <TitleView title="泵运行统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <!-- <p class="div1_d_p"> 点位比例</p> -->
                <div class="flex pl32 pr32" style="justify-content: space-between;margin-top: 20px;">
                    <SafeLeftC v-for="item in dataC" :data="item.cnt"
                        :title="item.itv == 1 ? '停止' : '运行'" />
                </div>
            </div>
        </div>
        <div class="div1">
            <TitleView title="还气" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindRightB v-for="(item, index) in dataA" :number="item.pointValue" :title="item.title" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="动静设备风险统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <!-- <RemindRightC :data="dataB" /> -->
                <SafeLeftB :data="dataB" />
            </div>
        </div>
        
    </div>
</template>

<script>
import { safe_left } from "@/request/api.js"
import RemindRightB from './components/RemindRightB.vue';
import RemindRightC from '../Remind/components/RemindRightC.vue';
import SafeLeftC from './components/SafeLeftC.vue';
import SafeLeftB from './components/SafeLeftB.vue';
export default {
    components: {
        RemindRightB,
        RemindRightC,
        SafeLeftC,
        SafeLeftB
    },
    data() {
        return {
            dataA: [],
            dataB: [],
            dataC: [
                {cnt:"212",itv:1},
                {cnt:"192",itv:0}
            ]
        }
    },
    created() {
        this.getData()
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);

        },
        getData() {
            safe_left().then((res) => {
                console.log("res:", res);
                let allNum = 0, arr = [];
                res.data.data1.forEach(element => {
                    if (element.NAME == 'FI020102') {
                        element.title = '二末'
                        allNum = allNum + Number(element.pointValue)
                        arr.push(element)
                    }
                    if (element.NAME == 'FI020101A') {
                        element.title = '一末一路'
                        allNum = allNum + Number(element.pointValue)
                        arr.push(element)
                    }
                    if (element.NAME == 'FI020101B') {
                        element.title = '一末二路'
                        allNum = allNum + Number(element.pointValue)
                        arr.push(element)
                    }
                   
                });
                arr.push({ title: '总量', pointValue: allNum })
                this.dataA = arr
                this.dataB = res.data.data2
                this.dataC = res.data.data3
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.div1 {
    height: 277px;

    .div1_d {
        margin-top: 20px;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {
        .div1_d_p {
            width: 100%;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            display: flex;
            justify-content: end;
            align-items: center;
        }
    }
}
</style>